<template>
  <div class="main">
    <van-nav-bar class="navbar" :title="title" left-arrow @click-left="onClickLeft">
      <img class="icon_picture" slot="right" @click="onClickRight" src="../../assets/img/upload_icon.png" />
    </van-nav-bar>

    <!-- 文件上传面板 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
      <div class="container">
        <div class="item">
          <!-- :accept="fileAccept.image" -->
          <van-uploader
            accept="image/*"
            :before-read="(file, detail) => handleBeforeRead(file, detail, 'image')"
            :after-read="(file, detail) => handleAfterRead(file, detail, 'image')"
            multiple
            capture="camera"
          >
            <div class="img_container">
              <img class="icon" height="100%" src="../../assets/img/icon_picture.png" alt="" />
            </div>
            <span class="title">上传图片</span>
          </van-uploader>
        </div>

        <div class="item" @click="selectFile">
          <UploadAuth ref="upload" accept="video/*" @on-upload-start="handleUploadStart" @on-upload-end="handleUploadEnd" :token="token">
            <div class="img_container">
              <img class="icon" height="100%" src="../../assets/img/icon_video.png" alt="" />
            </div>
            <span class="title">上传视频</span>
          </UploadAuth>
        </div>

        <div class="item">
          <van-uploader
            accept="audio/*"
            :before-read="(file, detail) => handleBeforeRead(file, detail, 'music')"
            :after-read="(file, detail) => handleAfterRead(file, detail, 'music')"
          >
            <div class="img_container">
              <img class="icon" height="100%" src="../../assets/img/icon_music.png" alt="" />
            </div>
            <span class="title">上传音频</span>
          </van-uploader>
        </div>

        <div class="item">
          <van-uploader
            accept="file/*"
            :before-read="(file, detail) => handleBeforeRead(file, detail, 'file')"
            :after-read="(file, detail) => handleAfterRead(file, detail, 'file')"
          >
            <div class="img_container">
              <img class="icon" height="100%" src="../../assets/img/icon_doc.png" alt="" />
            </div>
            <span class="title">上传文档</span>
          </van-uploader>
        </div>

        <div class="item" @click="inputFolderNameVisible = true">
          <div class="img_container">
            <img class="icon" height="100%" src="../../assets/img/folder.png" alt="" />
          </div>
          <span class="title">新建文件夹</span>
        </div>
      </div>
    </van-popup>

    <!-- 分类面板 -->
    <div class="classify_panel">
      <div class="item" v-for="(item, index) in classifyList" :key="index" @click="handleClickFilter(item.type)">
        <div class="icon_container">
          <img height="100%" fit="contain" :src="item.src" />
        </div>
        <div class="title">{{ item.title }}</div>
      </div>
    </div>

    <!-- 搜索框 -->
    <van-search v-model="keywords" @search="handleSearch" placeholder="请输入搜索关键词" />

    <!-- 文件列表 -->
    <div class="list">
      <div class="action_bar">
        <span v-show="hasCheck" class="button_cancel" @click="handleCancelSelect">取消</span>
        <span class="button_select_all" @click="handleSelectAll">全选</span>
      </div>

      <div class="file_list">
        <div v-show="pid != 0" class="goback" @click="handleGoback">
          <van-icon name="arrow-left" />
          返回上一层
        </div>

        <van-cell-group>
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" offset="200" @load="onLoad">
              <div class="item" v-for="(item, index) in list" :key="index" @click="handleClickItem(item)">
                <van-image class="type_icon" fit="contain" :src="handleIconSrc(item)"></van-image>
                <van-cell :title="item.file_name" :label="item.create_time">
                  <template #right-icon>
                    <div v-show="!item.isCheck" class="icon_radio" @click.stop="handleCheckItem(item)"></div>

                    <img v-show="item.isCheck" class="icon_check" src="../../assets/img/icon_check.png" @click.stop="handleCheckItem(item)" />
                  </template>
                </van-cell>
              </div>
            </van-list>
          </van-pull-refresh>
        </van-cell-group>
      </div>
    </div>

    <!-- 新建文件夹名称输入框 -->
    <van-dialog v-model="inputFolderNameVisible" title="新建文件夹" show-cancel-button @confirm="handleCreatefolder" @close="folderName = ''">
      <input class="folder_input" type="text" v-model="folderName" />
    </van-dialog>

    <!-- 下载删除操作栏 -->
    <div v-show="actionBarVisible" class="action_bar_footer">
      <div class="button_download" @click="onClickDownloadButton">
        <img src="../../assets/img/icon_download.png" alt="" />
        下载
      </div>
      <div class="button_delete" @click="onClickDeleteButton">
        <img src="../../assets/img/icon_delete.png" alt="" />
        删除
      </div>
    </div>

    <!-- loading组件 -->
    <van-overlay :show="overlayVisible" z-index="10002">
      <van-loading class="loading" />
    </van-overlay>

    <Preview :show="previewVisible" @close="handlePreviewClose">
      <img v-if="currentFileType == 'image'" :src="previewSrc" class="preview_image" />
      <audio v-else-if="currentFileType == 'music'" :src="previewSrc" class="preview_audio" controls></audio>
      <video v-else-if="currentFileType == 'video'" :src="previewSrc" class="preview_video" controls></video>
    </Preview>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import Header from "@/components/header.vue";
import CryptoJS from "crypto-js";
import axios from "axios";

import IconPicture from "@/assets/img/icon_picture.png";
import IconVideo from "@/assets/img/icon_video.png";
import IconMusic from "@/assets/img/icon_music.png";
import IconDoc from "@/assets/img/icon_doc.png";

import TypePicture from "@/assets/img/file_picture.png";
import TypeVideo from "@/assets/img/file_video.png";
import TypeFile from "@/assets/img/folder.png";
import TypeDoc from "@/assets/img/file_doc.png";
import TypeMusic from "@/assets/img/file_music.png";

// 视频上传组件
import UploadAuth from "@/components/UploadAuth.vue";

// 文件预览组件
import Preview from "@/components/Preview.vue";

import { mediaURL, uploadURL } from "@/api/base.js";

// 处理文件扩展名
function handleExt(filename) {
  const list = filename.split(".");
  return list[list.length - 1];
}

const typeMap = {
  image: ["png", "jpg", "gif", "jpeg", "bmp"],
  file: ["doc", "docx", "xlsx", "xls", "pdf", "ppt", "pptx", "txt", "html", "zip", "rar"],
  music: ["mp3"],
  video: ["mp4", "avi", "mov", "3gp", "flv", "mkv", "mpg"],
};

const judgeType = (type, fileName) => {
  return Object.keys(typeMap).reduce((acc, cur) => {
    if (cur == type && typeMap[cur].includes(handleExt(fileName))) acc = true;
    return acc;
  }, false);
};

export default {
  components: {
    Header,
    UploadAuth,
    Preview,
  },
  data() {
    return {
      token: "",
      show: false,
      title: "采编",
      name: "",
      radio: "1",
      loading: false,
      actionBarVisible: false,
      inputFolderNameVisible: false,
      overlayVisible: false,
      folderName: "",
      videoFile: null,
      fileList: [],
      folderList: [],
      count: 0,
      pidMap: { 0: {} }, // 记录文件夹操作历史层级
      pid: 0, // 当前文件夹Id ，没有上级为0
      page: 1, // 当前页码
      limit: 10, // 每次请求数据个数
      keywords: "",
      loading: false,
      finished: false,
      refreshing: false,
      filtering: false,
      currentType: "", // 当前分类
      previewVisible: false,
      previewSrc: "",
      currentFileType: "", //当前点的的文件类型
      username: "PAPbj_admin2",
    };
  },
  computed: {
    list() {
      return [...this.folderList, ...this.fileList];
    },
    hasCheck() {
      return this.list.some((item) => item.isCheck);
    },
    classifyList() {
      return [
        {
          title: "图片",
          src: IconPicture,
          type: "img",
        },
        {
          title: "视频",
          src: IconVideo,
          type: "video",
        },
        {
          title: "音频",
          src: IconMusic,
          type: "music",
        },
        {
          title: "文档",
          src: IconDoc,
          type: "file",
        },
      ];
    },

    fileAccept() {
      const hanldeFileType = (arr) => arr.map((item) => `.${item}`).join(",");

      const imageAcceptType = hanldeFileType(typeMap.image);
      const fileAcceptType = hanldeFileType(typeMap.file);
      const musicAcceptType = hanldeFileType(typeMap.music);
      const videoAcceptType = hanldeFileType(typeMap.video);

      return {
        image: imageAcceptType,
        file: fileAcceptType,
        music: musicAcceptType,
        video: videoAcceptType,
      };
    },
  },
  watch: {
    fileList() {
      this.fileList.forEach((item) => {
        if ("isCheck" in item) return;
        this.$set(item, "isCheck", false);
      });
    },
    folderList() {
      this.folderList.forEach((item) => {
        if ("isCheck" in item) return;
        this.$set(item, "isCheck", false);
      });
    },
    hasCheck(value) {
      this.actionBarVisible = value;
    },
  },

  created() {
    this.getURLParams();
  },
  async mounted() {
    this.openLoading();
    await this.getUserToken();
    await this.getFileList();
    this.closeLoading();
  },
  methods: {
    getURLParams() {
      const searchParmas = new URLSearchParams(location.search);
      this.username = searchParmas.get("username") || "";
    },
    getUserToken() {
      const url = `${mediaURL}/api/open/wujing/user-login`;
      const data = {
        username: this.username,
      };

      return this.$http.post(url, data).then((res) => {
        this.token = res.data.token || "";
      });
    },
    handlePreviewClose() {
      this.currentType = "";
      this.previewSrc = "";
      this.previewVisible = false;
    },
    handlePreview(file) {
      this.currentFileType = Object.keys(typeMap).reduce((acc, cur) => {
        if (typeMap[cur].includes(handleExt(file.file_name))) acc = cur;
        return acc;
      }, "");
      this.previewSrc = file.file_url;
      this.previewVisible = true;
    },

    // 根据图片类型返回相应的icon
    handleIconSrc(file) {
      let src = "";

      if (file.is_folder == 0) {
        const iconSrc = {
          image: TypePicture,
          video: TypeVideo,
          file: TypeDoc,
          music: TypeMusic,
        };

        const ext = handleExt(file.file_name);
        const type = Object.keys(typeMap).reduce((acc, cur) => {
          if (typeMap[cur].includes(ext)) acc = cur;
          return acc;
        }, "");
        src = iconSrc[type];
      } else {
        src = TypeFile;
      }

      return src;
    },

    // 下拉刷新
    async onRefresh() {
      this.page = 1;
      this.filtering = false; // 关闭正在分类中
      await this.getFileList();
      this.refreshing = false;
    },

    // 数据懒加载
    async onLoad() {
      ++this.page;

      if (this.refreshing) {
        this.fileList = [];
        this.folderList = [];
        this.refreshing = false;
      }

      // 如果正在分类筛选中，执行获取分类数据的接口
      if (this.filtering) {
        try {
          const { data } = await this.getFilterData();
          const fileList = data.data.fileList || [];
          const folderList = data.data.folderList || [];
          this.fileList = [...this.fileList, ...fileList];
          this.folderList = [...this.folderList, ...folderList];
          this.count = data.data.count;

          this.loading = false;
          this.finished = this.list.length >= this.count;
        } catch (err) {
          Toast(err);
          this.loading = false;
          this.finished = this.list.length >= this.count;
        }
      } else {
        const postData = {
          folder_id: this.pid,
          page: this.page,
          limit: this.limit,
          order: "",
          sort: "",
          keywords: this.keywords,
        };
        const url = `${mediaURL}/api/open/wujing/list`;
        this.$http({
          method: "post",
          url,
          data: postData,
          headers: { Authorization: this.token },
        })
          .then((data) => {
            const fileList = data.data.fileList || [];
            const folderList = data.data.folderList || [];
            this.fileList = [...this.fileList, ...fileList];
            this.folderList = [...this.folderList, ...folderList];
            this.count = data.data.count;

            this.loading = false;
            this.finished = this.list.length >= this.count;
          })
          .catch((err) => {
            this.loading = false;
            this.finished = this.list.length >= this.count;
          });
      }
    },

    closeLoading() {
      this.overlayVisible = false;
    },
    openLoading() {
      this.overlayVisible = true;
    },

    // 记录文件切换的路径
    writeMap(pid) {
      const recursion = (obj, pid) => {
        if (JSON.stringify(obj) === "{}") return;
        for (const i in obj) {
          if (obj[this.pid]) {
            obj[this.pid][pid] = {};
          } else recursion(obj[i], pid);
        }
      };
      recursion(this.pidMap, pid);
      this.pid = pid;
    },

    // 读取上级文件夹ID
    readMap() {
      let prePid = "";
      const recursion = (obj, preI) => {
        if (prePid === preI) return;
        for (const i in obj) {
          if (i == this.pid) {
            prePid = preI;
          } else recursion(obj[i], i);
        }
      };

      recursion(this.pidMap, null);
      return prePid;
    },

    handleGoback() {
      this.page = 1;
      const prePid = this.readMap();
      this.goNextFolder(prePid);
    },
    // 点击列表
    handleClickItem(item) {
      if (item.is_folder == 1) this.goNextFolder(item.id);
      else {
        if (judgeType("file", item.file_name)) {
          Toast("该类型文件不支持预览");
        } else this.handlePreview(item);
      }
    },

    handlePreviewFile(item) {
      location.href = item.file_url;
    },
    async goNextFolder(pid) {
      this.openLoading();
      this.page = 1;
      const url = `${mediaURL}/api/open/wujing/next`;
      await this.$http({
        method: "post",
        url,
        data: {
          pid,
        },
        headers: { Authorization: this.token },
      }).then(() => {
        this.writeMap(pid);
      });
      await this.getFileList();
      this.closeLoading();
    },

    // 关键词搜索
    async handleSearch(value) {
      this.openLoading();
      this.page = 1;
      await this.getFileList(value);
      this.closeLoading();
    },

    getFilterData() {
      const url = `${mediaURL}/api/open/wujing/list-with-type`;
      const postData = {
        keywords: this.keywords,
        page: this.page,
        limit: this.limit,
        type: this.currentType,
        order: "",
        sort: "",
      };
      return this.$http({
        method: "post",
        url,
        data: postData,
        headers: { Authorization: this.token },
      });
    },

    // 分类筛选
    async handleClickFilter(type = "") {
      this.openLoading();
      this.currentType = type; // 记录当前所处分类
      this.filtering = true; // 打开正在分类中
      this.pid = 0;
      this.page = 1;
      try {
        const data = await this.getFilterData();
        this.fileList = data.data.fileList || [];
        this.folderList = data.data.folderList || [];
        this.count = data.data.count;

        this.loading = false;
        this.finished = this.list.length >= this.count;
      } catch (err) {
        console.log(err, "err");

        this.loading = false;
        this.finished = this.list.length >= this.count;
      }

      this.closeLoading();
    },

    onClickDownloadButton() {
      const selectList = this.getSelectList();
      const hasFolder = selectList.some((item) => item.is_folder == "1");
      if (hasFolder) {
        Toast("不能选择文件夹");
        return;
      }
      selectList.forEach((item) => {
        this.downloadFile(item);
      });
    },

    // 请求对应文件的二进制文件流进行下载
    downloadFile({ id, file_name }) {
      const url = `${mediaURL}/api/open/wujing/download`;
      this.$http({
        url,
        methods: "get",
        params: { id },
        responseType: "blob",
        headers: { Authorization: this.token },
      }).then((data) => {
        const blob = data;
        const elink = document.createElement("a");
        elink.download = file_name;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href);
        document.body.removeChild(elink);
      });
    },

    onClickDeleteButton() {
      Dialog.confirm({
        title: "提示",
        message: "确定删除选中的文件吗？",
      }).then(() => {
        this.deleteFile();
      });
    },
    // 获取当前选中的
    getSelectList() {
      return this.list.reduce((acc, cur) => {
        if (cur.isCheck) acc.push(cur);
        return acc;
      }, []);
    },

    deleteFile() {
      const url = `${mediaURL}/api/open/wujing/delete`;
      const selectList = this.getSelectList();
      const ids = selectList.map((item) => item.id).join(",");
      this.$http({
        method: "post",
        url,
        data: {
          id: ids,
        },
        headers: { Authorization: this.token },
      }).then((data) => {
        this.fileList = this.fileList.filter((item) => !selectList.includes(item));
        this.folderList = this.folderList.filter((item) => !selectList.includes(item));
        Toast("删除成功");
      });
    },
    async handleCreatefolder() {
      this.openLoading();
      this.page = 1;
      const url = `${mediaURL}/api/open/wujing/create`;
      await this.$http({
        method: "post",
        url,
        data: {
          pid: this.pid,
          name: this.folderName,
        },
        headers: { Authorization: this.token },
      }).then(() => {});
      await this.getFileList();
      this.closeLoading();
    },

    handleUploadStart() {
      this.openLoading();
    },
    async handleUploadEnd(uploadInfo) {
      const postData = {
        type: "video",
        pid: this.pid,
        title: uploadInfo.file.name,
        tags: "",
        size: uploadInfo.file.size,
        ext: handleExt(uploadInfo.file.name),
        fileUrl: uploadInfo.object,
        videoId: uploadInfo.videoId,
        error: "",
      };
      const data = await this.afterUpload(postData);
      await this.getFileList();
      this.closeLoading();
      this.show = false;
    },

    selectFile() {
      this.$refs.upload.$refs.fileUpload.click();
    },

    getFileList() {
      this.fileList = [];
      this.folderList = [];
      const postData = {
        folder_id: this.pid,
        page: this.page,
        limit: this.limit,
        order: "",
        sort: "",
        keywords: this.keywords,
      };
      const url = `${mediaURL}/api/open/wujing/list`;
      return new Promise((res, rej) => {
        this.$http({
          method: "post",
          url,
          data: postData,
          headers: { Authorization: this.token },
        }).then((data) => {
          const fileList = data.data.fileList || [];
          const folderList = data.data.folderList || [];
          this.fileList = [...this.fileList, ...fileList];
          this.folderList = [...this.folderList, ...folderList];
          this.count = data.data.count;
          this.finished = this.list.length >= this.count;
          res();
        });
      });
    },

    // 文件上传前校验格式
    handleBeforeRead(file, detail, type) {
      const fileType = handleExt(file.name);
      if (!typeMap[type].includes(fileType)) {
        Toast("请上传正确格式的文件");
        return false;
      }
      return true;
    },

    async handleAfterRead({ file }, detail, type) {
      this.openLoading();
      const typeMap = {
        image: "img",
        text: "file",
        application: "file",
      };

      const data = {
        size: file.size,
        ext: handleExt(file.name),
        type: typeMap[type] || type,
      };

      // 校验存储空间
      try {
        await this.checkStorage(data);
      } catch (err) {
        this.closeLoading();
        return;
      }

      const {
        data: { host, policy, callback, accessid, signature, dir },
      } = await this.getPolicy();
      const { callbackBody } = JSON.parse(CryptoJS.enc.Base64.parse(callback).toString(CryptoJS.enc.Utf8));

      console.log(callbackBody, "callbackBody");
      const param = {
        url: uploadURL,
        name: file.name,
        dir,
        policy,
        accessid,
        signature,
        callbackBody,
        file,
      };

      await this.uploadFile(param);

      const afterUploadParam = {
        type: typeMap[type] || type,
        pid: this.pid,
        title: file.name,
        tags: "",
        size: file.size,
        ext: handleExt(file.name),
        fileUrl: `${dir}${file.name}`,
        videoId: "",
        error: "",
      };

      const afterUploadResult = await this.afterUpload(afterUploadParam);

      await this.getFileList();
      this.closeLoading();
      this.show = false;
    },

    // 上传文件后的回调
    async afterUpload(postData) {
      const url = `${mediaURL}/api/open/wujing/callback`;
      return this.$http({
        method: "post",
        url,
        data: postData,
        headers: { Authorization: this.token },
      });
    },

    // 上传文件
    async uploadFile(data) {
      const url = data.url;
      const http = axios.create({
        baseURL: "",
        headers: {
          "Content-Type": "multipart/form-data;charset=UTF-8",
        },
      });

      const postData = new FormData();
      postData.append("name", data.name);
      postData.append("key", data.dir + "${filename}");
      postData.append("policy", data.policy);
      postData.append("OSSAccessKeyId", data.accessid);
      postData.append("success_action_status", 200);
      // postData.append('callback',data.callbackBody)
      postData.append("signature", data.signature);
      postData.append("file", data.file);

      return http.post(url, postData);
    },
    async getPolicy() {
      const url = `${mediaURL}/api/open/wujing/get-policy`;
      return this.$http({
        method: "post",
        url,
        headers: { Authorization: this.token },
      });
    },
    async checkStorage(data) {
      const url = `${mediaURL}/api/open/wujing/before-upload`;
      return this.$http({
        method: "post",
        url,
        data,
        headers: { Authorization: this.token },
      });
    },
    //导航返回
    onClickLeft() {
      uni.navigateBack();
      // uni.postMessage({
      //   data: {
      //     action: "message",
      //   },
      // });
    },
    // 唤起底部上传面板
    onClickRight() {
      this.show = !this.show;
    },

    handleCheckItem(item) {
      item.isCheck = !item.isCheck;
    },

    // 取消选择
    handleCancelSelect() {
      this.fileList.forEach((item) => {
        item.isCheck = false;
      });

      this.folderList.forEach((item) => {
        item.isCheck = false;
      });
    },
    // 全选
    handleSelectAll() {
      // 先判断是否是全选状态
      const isAllSelect = this.list.every((item) => item.isCheck);
      if (isAllSelect) {
        this.fileList.forEach((item) => (item.isCheck = false));
        this.folderList.forEach((item) => (item.isCheck = false));
      } else {
        this.fileList.forEach((item) => (item.isCheck = true));
        this.folderList.forEach((item) => (item.isCheck = true));
      }
    },
  },
};
</script>

<style scoped>
@import url("../../assets/style/style.css");
.main_form {
  width: 100%;
}

.main_form_con {
  padding: 0px 0.3rem;
}

.main_form_list {
  border-bottom: 1px solid #f6f6f6;
  padding-bottom: 0.25rem;
}

.ont_list {
  border-bottom: none !important;
}

.main_con_title {
  padding: 0.3rem 0px;
}

.main_input {
  border: none;
  color: #b5b5b5;
}

input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #b5b5b5;
}

input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #b5b5b5;
}

input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #b5b5b5;
}

input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #b5b5b5;
}

.main_con_radio {
  margin-top: 0.45rem;
  overflow: hidden;
}

.main_con_radio span {
  float: left;
  margin-right: 20px;
}

.main_uploader {
  width: 2.1rem;
  height: 1.45rem;
  border-radius: 10px;
  background-color: #f5f5f5;
  border: none;
}

.main_uploader img {
  width: 0.55rem;
}

/deep/ .van-uploader__preview-image {
  width: 2.1rem;
  height: 1.45rem;
}

.main_button {
  width: 90%;
  position: absolute;
  bottom: 1.5rem;
  text-align: center;
}

.main_button .van-button {
  border-radius: 50px;
}

.icon_picture {
  height: 20px;
}

.classify_panel {
  display: flex;
  height: 1.8rem;
  background-color: #f8f8f8;
}
.classify_panel .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.1rem;
  justify-content: center;
  width: 25%;
  box-sizing: border-box;
}

.classify_panel .item .icon_container {
  height: 0.5rem;
}

.classify_panel .item .title {
  padding: 5px 0;
  font-size: 14px;
}

/deep/.van-popup {
  z-index: 10001 !important;
}

.container {
  display: flex;
  flex-flow: wrap;
  height: 100%;
  padding: 20px 0;
  box-sizing: border-box;
}
.container .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  height: 50%;
  width: 25%;
  box-sizing: border-box;
}

.container .item .title {
  font-size: 12px;
  margin-top: 10px;
}

.list {
  padding-bottom: 0.95rem;
}

.list .action_bar {
  overflow: hidden;
  height: 0.7rem;
  line-height: 0.7rem;
}

.list .action_bar .button_cancel {
  float: left;
  padding: 0 12px;
}
.list .action_bar .button_select_all {
  float: right;
  padding: 0 12px;
  color: #69a462;
}
.list .file_list .item {
  display: flex;
}

.list .file_list .type_icon {
  width: 0.8rem;
  padding: 0 8px;
}
.list .file_list .van-cell {
  width: calc(100% - 1rem);
  padding: 10px 16px 10px 5px;
}

.list .item .icon_radio {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 1px solid #ddd;
  border-radius: 50%;
  transition: 0.5s;
}

.list .item .icon_check {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  transition: 0.5s;
}

/deep/ .van-uploader .van-uploader__input-wrapper,
.upload {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/deep/ .van-uploader .van-uploader__input-wrapper .img_container,
.container .img_container {
  height: 0.5rem;
}

.action_bar_footer {
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.95rem;
  z-index: 10000;
  color: #fff;
  background-color: #4a8243;
}
.action_bar_footer .button_download,
.action_bar_footer .button_delete {
  width: 50%;
}
.action_bar_footer div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
.action_bar_footer img {
  width: 0.3rem;
  padding: 0.1rem 0;
}
.folder_input {
  padding: 0.1rem 0.2rem;
  margin: 0 0.2rem;
  width: calc(100% - 0.4rem);
  height: 0.6rem;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

.loading {
  top: 50%;
  left: 50%;
}

.goback {
  height: 0.6rem;
  line-height: 0.6rem;
  padding: 0 0 0 0.2rem;
}
.goback .van-icon {
  vertical-align: middle;
}
.van-list {
  min-height: calc(100vh - 2.5rem - 110px - 1.4rem);
}

.preview_image {
  max-width: 80vw;
  max-height: 80vh;
  padding: 10px;
}
.preview_video {
  max-width: 80vw;
  max-height: 80vh;
}
</style>
